<template>
  <el-dialog
    v-model="visible"
    title="声明与政策"
    width="500px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
    center
  >
    <div class="policy-content">
      <h3>欢迎您来到小米有品！</h3>
      <p class="policy-text">
        您可在有品进行商品浏览、支付购买、售后服务等功能。我们将严格遵守相关法律法规和隐私政策以保护您的个人信息。请您阅读并同意
        <a href="#" class="policy-link">《小米有品用户协议》</a>、
        <a href="#" class="policy-link">《隐私政策》</a>、
        <a href="#" class="policy-link">《小米账号使用协议》</a>和
        <a href="#" class="policy-link">《小米账号隐私政策》</a>。
      </p>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button 
          type="primary" 
          size="large" 
          @click="handleAgree"
          class="agree-btn"
        >
          同意并继续
        </el-button>
        <el-button 
          size="large" 
          @click="handleDisagree"
          class="disagree-btn"
        >
          不同意
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'agree'): void
  (e: 'disagree'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const visible = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
})

watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
})

const handleClose = () => {
  visible.value = false
}

const handleAgree = () => {
  emit('agree')
  visible.value = false
}

const handleDisagree = () => {
  emit('disagree')
  visible.value = false
}
</script>

<style scoped>
.policy-content {
  text-align: center;
  padding: 20px 0;
}

.policy-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.policy-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  text-align: left;
  margin: 0;
}

.policy-link {
  color: #ff6900;
  text-decoration: none;
}

.policy-link:hover {
  text-decoration: underline;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0 10px;
}

.agree-btn {
  background-color: #ff6900;
  border-color: #ff6900;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 500;
}

.agree-btn:hover {
  background-color: #e55a00;
  border-color: #e55a00;
}

.disagree-btn {
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #ddd;
  color: #666;
}

.disagree-btn:hover {
  border-color: #999;
  color: #333;
}

:deep(.el-dialog__header) {
  text-align: center;
  padding: 20px 20px 10px;
}

:deep(.el-dialog__title) {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

:deep(.el-dialog__body) {
  padding: 10px 20px;
}

:deep(.el-dialog__footer) {
  padding: 0 20px 20px;
}
</style>